<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=medium-dpi" />

<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
<link rel="stylesheet" type="text/css" href="css/mui-slide.css" />
<style>
.wrap > li > div{
	height: 100%;
	line-height: 100px;
	text-align: center;
	color: white;
	font-size: 25px;
	font-weight: bold;
	background: rgb(130, 197, 197);
}

</style>
</head>
<body>
<h4 style="position:absolute;z-index:1;">切换</h4>
<div id='slider' class='slide'>
  	<ul class="wrap">
		<li><div>1</div></li>
		<li><div>2</div></li>
		<li><div>3</div></li>
		<li><div>4</div></li>
		<li><div>5</div></li>
	</ul >
</div>
	<script type="text/javascript" src="js/JM.js"></script>
	<script type="text/javascript" src="js/slide.js"></script>
	<script type="text/javascript">
	var sc = MUI.Slide({
		id:"slider",
		currentIndex:4,
		fastChange:true	
	});
	JM.event.on(sc,"click",function(){
		if(sc.currentIndex >= sc.count - 1){
			sc.slideTo(0);
		}
		else{
			sc.slideTo(sc.currentIndex+1);
		}
		// sc.slideTo(0);
	});
	</script>
</body>

</html>